<script setup>
import {ref, reactive} from 'vue';
import {ElMessage} from 'element-plus';
// 导入提供的addProvider接口方法
import {addProvider} from '@/api/provider'; // 假设该方法位于此路径

// 表单数据
const addForm = reactive({
  proCode: '',
  proName: '',
  proDesc: '',
  proContact: '',
  proPhone: '',
  proFax: '',
  proAddress: ''
});

// 表单引用
const addFormRef = ref(null);
// 加载状态
const loading = ref(false);

// 验证规则
const rules = {
  proCode: [
    {required: true, message: '请输入供应商编码', trigger: 'blur'},
    {min: 2, max: 20, message: '编码长度在 2 到 20 个字符', trigger: 'blur'}
  ],
  proName: [
    {required: true, message: '请输入供应商名称', trigger: 'blur'},
    {min: 2, max: 50, message: '名称长度在 2 到 50 个字符', trigger: 'blur'}
  ],
  proContact: [
    {required: true, message: '请输入联系人', trigger: 'blur'}
  ],
  proPhone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    {
      pattern: /^1[0-9]\d{9}$/,
      message: '请输入有效的手机号码',
      trigger: ['blur', 'change']
    }
  ]
};

// 提交表单
const submitForm = async () => {
  if (!addFormRef.value) return;

  try {
    // 表单验证
    const valid = await addFormRef.value.validate();
    if (valid) {
      loading.value = true;

      // 使用提供的addProvider方法提交数据
      const response = await addProvider(addForm);
      console.log("resffdgghfn" + response.data.code)
      if (response.data.code == "20000") {
        ElMessage.success(response.data.msg || '添加成功');
        resetForm();
      } else {
        ElMessage.error(response.data.msg || '添加失败');
      }
    }
  } catch (error) {
    console.error('提交失败:', error);
    // 错误处理
    if (error.response) {
      if (error.response.status === 404) {
        ElMessage.error('接口地址不存在，请检查接口路径是否正确');
      } else {
        ElMessage.error(`请求失败: ${error.response.data?.msg || '未知错误'}`);
      }
    } else {
      ElMessage.error('请求发生错误，请稍后重试');
    }
    return false;
  } finally {
    loading.value = false;
  }
};

// 重置表单
const resetForm = () => {
  if (addFormRef.value) {
    addFormRef.value.resetFields();
  }
};
</script>

<template>
  <div class="provider-add-container">
    <h2>添加供应商</h2>
    <el-form
        :model="addForm"
        :rules="rules"
        ref="addFormRef"
        label-width="120px"
        class="demo-ruleForm"
    >
      <el-form-item label="供应商编码" prop="proCode">
        <el-input v-model="addForm.proCode" placeholder="请输入供应商编码"></el-input>
      </el-form-item>

      <el-form-item label="供应商名称" prop="proName">
        <el-input v-model="addForm.proName" placeholder="请输入供应商名称"></el-input>
      </el-form-item>

      <el-form-item label="供应商详细描述" prop="proDesc">
        <el-input type="textarea" v-model="addForm.proDesc" placeholder="请输入供应商详细描述"></el-input>
      </el-form-item>

      <el-form-item label="供应商联系人" prop="proContact">
        <el-input v-model="addForm.proContact" placeholder="请输入联系人"></el-input>
      </el-form-item>

      <el-form-item label="联系电话" prop="proPhone">
        <el-input v-model="addForm.proPhone" placeholder="请输入联系电话"></el-input>
      </el-form-item>

      <el-form-item label="地址" prop="proAddress">
        <el-input type="textarea" v-model="addForm.proAddress" placeholder="请输入地址"></el-input>
      </el-form-item>

      <el-form-item label="传真" prop="proFax">
        <el-input v-model="addForm.proFax" placeholder="请输入传真"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm" :loading="loading">保存</el-button>
        <el-button @click="resetForm">清空</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.provider-add-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}

.demo-ruleForm {
  margin-top: 20px;
}

.el-form-item {
  margin-bottom: 15px;
}

.el-button + .el-button {
  margin-left: 10px;
}
</style>
